<template>
    <div>

        <el-form-item label="用户名" prop="username">
          <el-input
            type="text"
            v-model="loginForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="密 码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="captcha" >
          <el-input maxlength="5" type="text" v-model.number="loginForm.captcha" class="captcha" 
          ref="captcha" @keydown.native.enter="submitForm('loginForm')"></el-input>
          <span class="captcha-svg">
              <i></i>
            </span>  
        </el-form-item>
        

        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')">
            提交
          </el-button>
        </el-form-item>
      
         <el-form-item>
           <!-- 切换短信登录 -->
          <div class='sms'>
            <!-- <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-iphone"></use>   -->
             <!-- </svg> -->
             <a href="javascript:;" @click="isSmsLogin=true"  style="color: #fff; font-size: 16px">切换短信登录</a>
          </div>
        </el-form-item>
       </div>
        <!-- 切换短信登录 -->
</template>
<script>
export default {
  data() {
    // 校验验证码
    var validateCaptcha = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("验证码错误"));
      }
    };
    // 校验用户名
    var validateUsername = (rule, value, callback) => {
      var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
      if (uPattern.test(value)) {
        callback();
      } else {
        callback("3-16字母下划线");
      }
    };
    // 校验密码
    var validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请正确输入密码"));
      } else {
        callback();
      }
    };
    return {
      // 控制是否切换短信登陆
      isSmsLogin:trye, 
        loginForm: {
        username: "",
        password: "",
        captcha: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    };
  },
  watch: {
    loginForm:{
      handler(newval){
        console.log(newval)
      },
      deep:true
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less">
// *{
//   margin:0;
//   padding: 0;
// }
.el-input {
  .el-input__inner {
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: black;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 250px;
    margin-left: -30px;

  }
}

.videoBox video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 800px;
}
.elBox .h1{
  width: 400px;
  text-align: center;
  font-size: 36px;
  color:rgba(0, 0, 0, 0.605);
}
.elBox{
  width:400px;
  height:550px;
  background:#7676b06e;
  // border: 2px solid white;
  border-radius: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 100px;
  top: 100px;

}
.el-button{
  display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: rgba(166, 6, 83, 0.412);
    border: 1px solid #dcdfe6;
    color: white;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    width: 250px;
    margin-left: -30px;
}
.el-form-item__label{
color:black;
font-weight: 900;
}
.imgbox img{
  position: absolute;
  top: 0;
  right: 0;
}
// .acap{
//   display: block;
//   width: 50px;
//   height: 40px; 
//   background-color: red;
//   border: 0px;
// }

// element.style {
//     width: 100px;
// }

</style>